import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';

import MTable from '@/component/common/MTable';
import { Pagination } from 'antd';
import BalanceLayout from '@/component/balance/Layout'

import FilterListPage from '@/component/common/FilterListPage';
import StoreListMini from '@/store/StoreListMini';
import format from '@/tool/format';

import { balance_list as api_balance_list, balance_gather_list } from '@/constants/ApiTypes';

@observer class BalanceListGather extends FilterListPage {
    constructor(props) {
        super(props);
        this.listApiType = balance_gather_list;
    }
    async pageDidMount() {
        const result = await StoreListMini.getInfo();
        if (!result) return;
        this._setState({ loading: false });
    }
    render() {
        const { dataList, spinning } = this.state;
        const columns = [
            { title: '编号', dataIndex: 'id', align: 'middle' },
            { title: '合同号', dataIndex: 'contract_no', align: 'middle' },
            { title: '发生时间', dataIndex: 'create_time', align: 'middle', render: (text, record, dataIndex) => format.timeString(text) },
            { title: '对方信息', dataIndex: 'to_info', align: 'middle' },
            { title: '收款名称', dataIndex: 'bill_name', align: 'middle' },
            { title: '收款金额', dataIndex: 'bill_amount', align: 'middle', render: (text, record, dataIndex) => isNaN(text) ? text : text / 100 + '元' },
            { title: '付款情况', dataIndex: 'bill_status', align: 'middle',  render: (text, record, dataIndex) => text == 0 ? '未付款' : '已付款' },
            { title: '付款时间', dataIndex: 'pay_time', align: 'middle',  render: (text, record, dataIndex) => record.bill_status == 0 ? '--' : format.timeString(text) }
        ];
        return (
            <BalanceLayout loading={this.state.loading} onSubmit={this.getDataListWithFilter} typeFilter={false}>
                <MTable columns={columns} dataSource={dataList} spinning={spinning}/>
                <div className="pagination">
                    {this.state.total > 0 && <Pagination showQuickJumper current={this.state.current_page} pageSize={10} total={this.state.total} onChange={this.pageOnChange} />}
                </div>
            </BalanceLayout>
        );
    }
}

export default BalanceListGather;